<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Hello World</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">

    class ListOfWords extends React.PureComponent{
      render(){
        return <div>{this.props.words.join(',')}</div>;
      }
    }

    class WordAdder extends React.Component{
      constructor(props){
        super(props);
        this.state = {
          words:['marklar']
        };
        this.handleClick = this.handleClick.bind(this);
      }

      handleClick(){
        //this won't work,words didn't change
        /*
        const words = this.state.words;
        words.push('marklar');
        this.setState({
          words:words
        });
        */

        //this works, concat returns a new array
        /*
        const words = this.state.words;
        const newWords = this.state.words.concat('marklar');
        this.setState({
          words:newWords
        });
        */

        // this works
        /*
        this.setState(prevState => ({
          words:prevState.words.concat(['marklar'])
        }));
        */

        // requires ES6 compiler
        this.setState(prevState => ({
          words:[...prevState.words,'marklar']
        }));

        /**
        * return new Object
        * colormap is an Object
        */
        function updateColorMap(colormap){
          return Object.assign({},colormap,{right:'blue'});
        }

        function updateColorMap(colormap){
          return {...colormap,right:'blue'};
        }
      }

      render(){
        return (
         <div>
          <button onClick={this.handleClick}>Add</button>
          <ListOfWords words={this.state.words}/>
         </div>
        );
      }
    }

    ReactDOM.render(<WordAdder />,document.getElementById('root'));
  </script>
  <!--
      Note: this page is a great way to try React but it's not suitable for production.
      It slowly compiles JSX with Babel in the browser and uses a large development build of React.

      To set up a production-ready React build environment, follow these instructions:
      * https://reactjs.org/docs/add-react-to-a-new-app.html
      * https://reactjs.org/docs/add-react-to-an-existing-app.html

      You can also use React without JSX, in which case you can remove Babel:
      * https://reactjs.org/docs/react-without-jsx.html
      * https://reactjs.org/docs/cdn-links.html
    -->
</body>

</html>